import { useState } from "react"
import { Divider } from 'antd'
function UseState() {
  const [name, setName] = useState('shawlee') //数字 布尔值 null undefined 都可以直接赋值 一样的

  const [arr, setArr] = useState([1, 2, 3, 4, 5])
    const heandleClick = () => {
    setName('lixiao')
  }

  const heandleClick2 = () => {
    setArr([...arr, 6]) //末尾新增 扩展运算符
    //setArr([0,...arr]) 头部新增 扩展运算符
  }

  //删除指定元素
  const heandleDelItem = () => {
    setArr(arr.filter((item) => item !== 1)) 
  }

  // 数组替换数据
  const heandleReplaceItem = () => {
    setArr(arr.map(item => {
      return item == 2 ? 666 : item
    }))
  }

  //插入元素
  const heandleInsertItem = () => {
    const startIndex = 0
    const endIndex = 2;
    setArr(
      [
        ...arr.slice(startIndex, endIndex),
        2.5,
        ...arr.slice(endIndex)
      ]
    )
  }

  // 排序/旋转
  const heandleSort = () => {
    const newList = arr.slice()
    newList.sort((a, b) => b - a)
    //newList.reverse()旋转
    setArr(newList)
  }


  const [obj, setObject] = useState(() => {
    const date = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
    return {
      date,
      name: '小满',
      age: 25
    }
  })
  const heandleChangeObj = () => {
    setObject({
      ...obj,
      name: '大满'
    })
    //setObject(Object.assign({}, obj, { age: 26 })) 第二种写法
  }

  const [index, setIndex] = useState(0)

  const heandleChangeOne = () => {
    setIndex(index + 1)
    console.log(index,'index') //0
    // 这里输出0是因为set函数是异步的所以后执行，这么做是为了性能优化
  }
  const heandleChangeIndex = () => {
    // 当我们多次以相同的操作更新状态时，React 会进行比较，如果值相同，则会屏蔽后续的更新行为。自带防抖的功能，防止频繁的更新
    // setIndex(index + 1) //1
    // setIndex(index + 1) //1
    // setIndex(index + 1) //1

    // 为了解决这个问题，你可以向setIndex 传递一个更新函数，而不是一个状态
    setIndex(index => index + 1) //1
    setIndex(index => index + 1) //2
    setIndex(index => index + 1) //3
    console.log(index,'index')
  }

  return (
    <>
      <h1>useState示例</h1>
      <h2>操作基础数据</h2>
      <button onClick={heandleClick}>更改名称</button>
      <div>{name}</div>
      <Divider />
      <h2>操作数组</h2>
      <button onClick={heandleClick2}>更改数组</button>
      <button onClick={heandleDelItem}>删除元素</button>
      <button onClick={heandleReplaceItem}>替换元素</button>
      <button onClick={heandleInsertItem}>插入元素</button>
      <button onClick={heandleSort}>排序/旋转</button>
      <div>{arr}</div>
      <Divider />
      <h2>操作对象</h2>
      <button onClick={heandleChangeObj}>更改对象</button>
      <div>日期：{obj.date}</div>
      <div>姓名：{obj.name}</div>
      <div>年龄：{obj.age}</div>
      <Divider />
      <h2>更新机制</h2>
      <h1>Index:{index}</h1>
      <button onClick={heandleChangeOne}>单次更改index值</button>
      <button onClick={heandleChangeIndex}>连续更改index值</button>
    </>
  )
}
export default UseState